<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery-1.9.0.js"></script>
    <title>Document</title>
    <script>
        function doAjax1() {
            let params1 = $("#f1").serialize();
            console.log('serialize:', params1);
            let params2 = $("#f1").serializeArray();
            console.log('serializeArray:', params2);
            // $.ajax
            $.ajax({
                method: 'post',
                url: '/ajax/day01/getData1.php',
                // data: "msg=测试111111",
                // data: {msg: "qqqqq"}, // jquery-ajax支持的格式
                data: params1, // jquery-ajax支持的格式
                // data: params2, // jquery-ajax支持的格式
                dataType: "json",
                success: function(result){
                    console.log('result:', result);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    console.log("jqXHR:" , jqXHR);
                    console.log("textStatus:" , textStatus);
                    console.log("errorThrown:" , errorThrown);
                }
            });
        }
        function doAjax2(){
            let params2 = $("#f1").serializeArray();
            $.get("/ajax/day02/getData2.php", params2, (result)=>{
                console.log('get:', result);
            }, 'json');
        }
        function doAjax3(){
            let params2 = $("#f1").serializeArray();
            $.post("/ajax/day02/getData2.php", params2, (result)=>{
                console.log('post:', result);
            }, 'json');
        }
        function doAjax4(){
            let params2 = $("#f1").serializeArray();
            $.getJSON("/ajax/day02/getData2.php", params2, (result)=>{
                console.log('getJSON:', result);
            });
        }
        function doAjax5(){
            let params2 = $("#f1").serializeArray();
            $("#d1").load("/ajax/day02/getData21.php", params2, (responseText,textStatus,jqXHR)=>{
                // 主要作用是, 告诉使用者 请求是否结束
                console.log('load:', responseText);
                console.log('load:', textStatus);
                console.log('load:', jqXHR);
            });
        }
        function doAjax6(){
            let params2 = $("#f1").serializeArray();
            $.getScript("/ajax/day02/t1.js", (script,textStatus,jqXHR)=>{
                // 主要作用是, 告诉使用者 请求是否结束
                console.log('getScript:', script);
                console.log('getScript:', textStatus);
                console.log('getScript:', jqXHR);

                // 业务处理
                $("#btn").prop("disabled", false);
            });
        }

        function doAjax7() {
            let params1 = $("#f1").serialize();
            // 会返回 jquery 封装的 ajax 对象
            let jqXhr = $.ajax({
                method: 'post',
                url: '/ajax/day01/getData1.php',
                data: params1, // jquery-ajax支持的格式
                dataType: "json"
            }).done((result) => {
                console.log('result:', result);
            }).fail((jqXHR, textStatus, errorThrown)=>{
                console.log("jqXHR:" , jqXHR);
                console.log("textStatus:" , textStatus);
                console.log("errorThrown:" , errorThrown);
            });
            console.log(jqXhr);
            // jqXhr.done((result) => {
            //     console.log('result:', result);
            // });
            // jqXhr.fail((jqXHR, textStatus, errorThrown)=>{
            //     console.log("jqXHR:" , jqXHR);
            //     console.log("textStatus:" , textStatus);
            //     console.log("errorThrown:" , errorThrown);
            // });
        }
    </script>
</head>
<body>
    <button onclick="doAjax1()" >ajax1</button>
    <button onclick="doAjax2()" >ajax2</button>
    <button onclick="doAjax3()" >ajax3</button>
    <button onclick="doAjax4()" >ajax4</button>
    <button onclick="doAjax5()" >ajax5</button>
    <button onclick="doAjax6()" >ajax6</button>
    <button id="btn" onclick="doSome()" disabled >test-ajax6-fun</button>
    <hr>
    <div id="d1" style="background-color: gray;" ></div>
    <form id="f1" >
        <div>
            <label>msg: <input type="text" name="msg" ></label>
        </div>
        <div>
            <label>登录名: <input type="text" name="loginName" ></label>
        </div>
        <div>
            <label>密码: <input type="password" name="pwd" ></label>
        </div>
    </form>
</body>
</html>